<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摆盘子</title>
</head>

<body>
    <h1>摆盘子</h1>
    <p>这是一个简单的摆盘子游戏，你可以通过点击按钮来设置盘子的数量。</p>

    <div>
        <label for="plateCount">盘子数量:</label>
        <input type="number" id="plateCount" value="0" min="0" />
        <button id="setPlatesBtn">设置盘子</button>
    </div>

    <div id="platesDisplay">
        <canvas id="platesCanvas" width="400" height="400"></canvas>
    </div>

    <script>
        document.getElementById('setPlatesBtn').addEventListener('click', function () {
            const count = parseInt(document.getElementById('plateCount').value, 10);


            const canvas = document.getElementById('platesCanvas');
            const ctx = canvas.getContext('2d');

            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 重新绘制盘子
            for (let i = 0; i < count; i++) {
                const startX = 100 + (i + 1) * Math.ceil(Math.random() * 9) * 20;
                const startY = 100 +  (i + 1) * Math.ceil(Math.random() * 9) * 20;
                ctx.beginPath();
                ctx.arc(startX, startY, 20, 0, Math.PI * 2);
                ctx.fillStyle = 'lightblue';
                ctx.fill();
                ctx.stroke();
            }
        });
    </script>
    </script>
</body>

</html>